<template>
  <div>
    <div
      v-show="(!isEdit&&!isNoStartDetail&&!isEndedDetail&&!isSituation&&!isApprove)"
      class="page-index">
      <div class="page-left">
        <ClassifyTreeSilder
          @nodeClick="nodeClick"
          :isEdit="true"
          ref="treeSilder"
          @del="del"
          @add="add"
          @edit="edit"
        />
      </div>
      <div class="page-right">
        <div class="table-search">
          <el-form inline>
            <el-form-item label="会议主题">
              <el-input v-model="queryParams.name" size="mini" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="会议类型">
              <el-select filterable clearable v-model="queryParams.meetingTypeId" size="mini" placeholder="请选择" >
                <el-option
                  v-for="(item) in meetingList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.meetingTypeName"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="会议状态">
              <el-select v-model="queryParams.meetingStatus" size="mini" placeholder="请选择" >
                <el-option
                  v-for="(item,index) in statusList"
                  :key="index"
                  :value="index"
                  :label="item"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="mini" type="primary" @click="search">搜索</el-button>
              <el-button size="mini" @click="reset">重置</el-button>
            </el-form-item>
          </el-form>
          <el-form inline>
            <el-form-item>
              <el-button size="mini" type="primary" @click="openAdd">发布会议</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="table-box">
          <el-table
            :data="tableData"
            height="100%"
          >
            <el-table-column prop="id" label="ID" align="center" width="80" />
            <el-table-column prop="name" label="会议主题" align="center" min-width="200" />
            <el-table-column prop="partyOrgName" label="所属支部" align="center" width="180" />
            <el-table-column prop="meetingTypeName" label="会议类型" align="center" width="150" />
            <el-table-column prop="meetingTime" label="会议时间" align="center" width="320" />
            <el-table-column prop="meetingStatus" label="会议状态" align="center" width="120">
              <template slot-scope="scope">
                {{ statusList[scope.row.meetingStatus] }}
              </template>
            </el-table-column>
            <el-table-column prop="attendance" label="参会情况" align="center" width="120">
              <template slot-scope="scope">
                <span class="click-span" @click="openSituation(scope.row)">{{ scope.row.attendance }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="leavePerson" label="请假审批" align="center" width="150">
              <template slot-scope="scope">
                <span class="click-span" @click="openApprove(scope.row)">{{ scope.row.leavePerson }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" align="center" width="240">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  @click="openDetail(scope.row)"
                >查看</el-button>
                <el-button
                  type="text"
                  size="mini"
                  @click="openEdit(scope.row)"
                >编辑</el-button>
                <el-button
                  type="text"
                  size="mini"
                >二维码</el-button>
                <el-button
                  type="text"
                  size="mini"
                  style="color:#67C23A;"
                  @click="openRestore(scope.row)"
                >恢复</el-button>
                <el-button
                  type="text"
                  size="mini"
                  style="color:#F56C6C;"
                  @click="openDelete(scope.row)"
                >撤销</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <pagination
          :total="total"
          :page.sync="queryParams.pageNo"
          :limit.sync="queryParams.pageSize"
          @pagination="getData"
        />
        <addOrg ref="addOrg" @updateTree="updateTree" />
        <editOrg ref="editOrg" @updateTree="updateTree" />
      </div>
    </div>
    <addOrEdit v-show="isEdit" ref="addOrEdit" @getData="getData" @goback="editGoback" />
    <noStartDetail v-show="isNoStartDetail" ref="noStartDetail" @detailToEdit="detailToEdit" @goback="noStartDetailGoback" />
    <endedDetail v-show="isEndedDetail" ref="endedDetail" @goback="endedDetailGoback" />
    <meetingSituation v-show="isSituation" ref="meetingSituation" @goback="situationGoback" />
    <approvePage v-show="isApprove" ref="approvePage" @goback="approveGoback" />
  </div>
</template>
<script>
import ClassifyTreeSilder from './components/classifyTreeSilder'
import addOrEdit from './components/addOrEdit'
import noStartDetail from './components/noStartDetail'
import endedDetail from './components/endedDetail'
import meetingSituation from './components/meetingSituation'
import approvePage from './components/approve'
import addOrg from './components/addOrg.vue'
import editOrg from './components/editOrg.vue'
import { queryMeetingTypeList, queryByCondition, deleteMeetingType, deleteById } from '@/api/cadreBusiness/meetingManagement'
export default {
  components: {
    ClassifyTreeSilder,
    meetingSituation,
    addOrEdit,
    noStartDetail,
    endedDetail,
    approvePage,
    editOrg,
    addOrg
  },
  data () {
    return {
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        name: '',
        meetingTypeId: '',
        meetingStatus: ''
      },
      total: 0,
      tableData: [],
      isNoStartDetail: false,
      isEndedDetail: false,
      isEdit: false,
      isSituation: false,
      isApprove: false,
      meetingList: [],
      statusList: ['未开始', '进行中', '已撤销', '已结束']
    }
  },
  mounted () {
    this.getMeetingList()
    this.getData()
  },
  methods: {
    del (id, level) {
      this.$confirm('此操作将永久删除该会议类型, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteMeetingType({ id }).then((res) => {
          this.$message.success('删除成功')
          this.updateTree(0)
        })
      })
    },
    getMeetingList () {
      queryMeetingTypeList().then((res) => {
        this.meetingList = res?.data || []
      })
    },
    add (id, label) {
      this.$refs.addOrg.open(id, label)
    },
    edit (id, level) {
      this.$refs.editOrg.open(id, level)
    },
    updateTree (id) {
      this.$refs.treeSilder.updateKeyData(id)
    },
    getData () {
      queryByCondition(this.queryParams).then((res) => {
        this.tableData = res?.data?.records || []
        this.total = res?.data?.total || 0
      })
    },
    search () {
      this.queryParams.pageNo = 1
      this.getData()
    },
    openAdd () {
      this.isEdit = true
      this.$refs.addOrEdit.init({})
    },
    openEdit (row) {
      this.isEdit = true
      this.$refs.addOrEdit.init(row)
    },
    openDelete (row) {
      this.$confirm('是否确认撤销会议?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {})
    },
    openRestore (row) {
      this.$confirm('是否确认恢复会议?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {})
    },
    openDetail (row) {
      if (row.status) {
        this.isNoStartDetail = true
        this.$refs.noStartDetail.init(row)
      } else {
        this.isEndedDetail = true
        this.$refs.endedDetail.init(row)
      }
    },
    nodeClick (node) {
      this.queryParams.meetingTypeId = node.id
      this.search()
    },
    openSituation (row) {
      this.isSituation = true
      this.$refs.meetingSituation.init(row?.id)
    },
    openApprove (row) {
      this.isApprove = true
      this.$refs.approvePage.init(row?.id)
    },
    editGoback (isQuery) {
      this.isEdit = false
      if (isQuery) {
        this.getData()
      }
    },
    noStartDetailGoback () {
      this.isNoStartDetail = false
    },
    endedDetailGoback () {
      this.isEndedDetail = false
    },
    situationGoback () {
      this.isSituation = false
    },
    approveGoback () {
      this.isApprove = false
    },
    detailToEdit (row) {
      this.isNoStartDetail = false
      this.openEdit(row)
    },
    reset () {
      this.queryParams.name = ''
      this.queryParams.meetingTypeId = ''
      this.queryParams.meetingStatus = ''
      this.search()
    }
  }
}
</script>
<style scoped lang="scss">
.page-index {
  display: flex;
  padding-top: 24px;
  .page-left {
    height: calc(100vh - 130px);
    overflow-y: auto;
    width: 300px;
  }
  .page-right {
    flex: 1;
    overflow-x: hidden;
    .table-search {
      display: flex;
      justify-content: space-between;
      padding-left:16px;
    }
    .table-box {
      height: calc(100vh - 230px);
      .click-span {
        cursor: pointer;
        color: #409EFF;
      }
    }
  }
}

</style>
